<template>
  <div>
    <!-- 折线图 -->
    <div ref="main" style="width: 900px; height: 450px; margin: 0 auto;"></div>
    <!-- 选择年份 -->
    <div class="block" align="center">
      <span class="demonstration">请选择查询的年份：</span>
      <el-date-picker
        v-model="value"
        type="year"
        @change="handleChange"
        placeholder="选择年">
      </el-date-picker>
    </div>
    <!-- 柱状图 -->
    <div ref="main2" style="width: 900px; height: 450px; margin: 0 auto;"></div>
    <!-- 选择时间区间 -->
    <!-- <div class="block" align="center">
      <span class="demonstration">请选择时间区间：</span>
      <el-date-picker
        v-model="value1"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>
    </div> -->

    <!-- 选择需要的时间 -->
    <div align="center">
      <span class="demonstration">请选择需要的时间：</span>
      <div class="block">
        <span class="demonstration">年：</span>
        <el-date-picker
          v-model="value2"
          type="year"
          @change="handleChange2"
          placeholder="选择年">
        </el-date-picker>
      </div>
      <div class="block">
        <span class="demonstration">月：</span>
        <el-date-picker
          v-model="value3"
          type="month"
          @change="handleChange3"
          placeholder="选择月">
        </el-date-picker>
      </div>
      <div class="block">
        <span class="demonstration">日：</span>
        <el-date-picker
          v-model="value4"
          type="date"
          @change="handleChange4"
          placeholder="选择日期">
        </el-date-picker>
      </div>
    </div>   
  </div>
</template>

<script>
import { getLineData,getStylistPerformanceData } from '@/api/pos/sale';

export default {
  name: 'Dashboard',
  data() {
    return {
      value: null,
      value2: null,
      value3: null,
      value4: null
    };
  },
  methods: {
    //拿到选择框的year
    handleChange(val) {
      getLineData(val.getFullYear()).then((data) => {
        const lineData = data;
        this.initLineCharts(lineData);
      });
    },
    initLineCharts(lineData) {
  // 初始化折线图
  const actualData = lineData.data;
  const xAxisData = actualData.map(item => item.month);
  const seriesData = actualData.map(item => item.sum);

  var lineChart = this.$echarts.init(this.$refs.main);
  var option = {
    title: {
      text: '各个月份营业额'
    },
    xAxis: {
      type: 'category',
      data: xAxisData,
      name: '时间/月'
    },
    yAxis: {
      type: 'value',
      name: '营业额/元'
    },
    series: [
      {
        type: 'line',
        data: seriesData,
        symbol: 'circle', // 设定折线图上数据点的形状为圆形
        symbolSize: 8, // 设定数据点的大小
        label: {
          show: true,
          position: 'top', // 数据值显示在数据点上方
          color: '#333', // 数据值文本颜色
          fontSize: 12, // 数据值字体大小
          fontWeight: 'bold' // 数据值字体加粗
        }
      }
    ]
  };

  option && lineChart.setOption(option);
},
    handleChange2(val2) {
      getStylistPerformanceData("year", val2.getFullYear()).then((data) => {
        const barData = data.data
        console.log("barData content:", barData); // 输出 barData 的内容
        this.initBarCharts(barData);
      });
    },

    handleChange3(val3) {
      let month = String(val3.getMonth()+1).padStart(2, "0")
      getStylistPerformanceData("month", val3.getFullYear()+"-"+month).then((data) => {
        const barData = data.data
        console.log("barData content:", barData); // 输出 barData 的内容
        this.initBarCharts(barData);
      });
    },

    handleChange4(val4) {
      let month = String(val4.getMonth()+1).padStart(2, "0")
      let day = String(val4.getDate()).padStart(2, "0")
      getStylistPerformanceData("day", val4.getFullYear()+"-"+month+"-"+day).then((data) => {
        const barData = data.data
        console.log("barData content:", barData); // 输出 barData 的内容
        this.initBarCharts(barData);
      });
    },

    initBarCharts(barData) {
  var barChart = this.$echarts.init(this.$refs.main2);
  
  // 预定义不同颜色数组
  var colorArray = ['#FFC300', '#FF5733', '#C70039', '#900C3F', '#581845'];
  
  var option = {
    title: {
      text: '各个发型师的营业额'
    },
    xAxis: {
      type: 'category',
      data: barData.map(item => item.stylist_name),
      name: '发型师/姓名'
    },
    yAxis: {
      type: 'value',
      name: '营业额/元'
    },
    series: [
      {
        type: 'bar',
        data: barData.map((item, index) => ({
          value: item.total_amount,
          itemStyle: {
            color: colorArray[index % colorArray.length] // 使用预定义的颜色数组
          },
          label: {
            show: true,
            position: 'top',
            color: '#333',
            fontSize: 12,
            fontWeight: 'bold'
          }
        }))
      }
    ]
  };

  option && barChart.setOption(option);
}
  }
};
</script>